import 'package:flutter/material.dart';

class LayoutSample extends StatelessWidget {
  void _onFavorite(count) {
    print('$count');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: new ThemeData(
        primarySwatch: Colors.red,
      ),
      home: Material(
        child: ListView(
          children: <Widget>[
            new Image.asset(
              'images/lake.jpg',
              height: 240.0,
              fit: BoxFit.cover,
            ),
            TitleSection(callbackFavorite: _onFavorite),
            ButtonSection(),
            Container(
              child: Row(
                children: <Widget>[
                  Column(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Center(
                          child: Container(
                            padding: const EdgeInsets.all(32.0),
                            child: new Text(
                              '''
Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese Alps. Situated 1,578 meters above sea level, it is one of the larger Alpine Lakes. A gondola ride from Kandersteg, followed by a half-hour walk through pastures and pine forest, leads you to the lake, which warms to 20 degrees Celsius in the summer. Activities enjoyed here include rowing, and riding the summer toboggan run.
        ''',
                              softWrap: true,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

typedef VoidOnFavorite = Function(int favoriteCount);

//标题部分
class TitleSection extends StatefulWidget {
  TitleSection({this.callbackFavorite});

  final VoidOnFavorite callbackFavorite;

  @override
  _TitleSectionState createState() => _TitleSectionState();
}

class _TitleSectionState extends State<TitleSection> {
  bool _isFavorite = false;
  int _favoriteCount = 40;

  void _addFavorite() {
    setState(() {
      _isFavorite = true;
      _favoriteCount++;
      if (widget.callbackFavorite != null) {
        widget.callbackFavorite(_favoriteCount);
      }
    });
  }

  void _removeFavorite() {
    setState(() {
      _isFavorite = false;
      _favoriteCount--;
      widget.callbackFavorite(_favoriteCount);
    });
  }

  @override
  Widget build(BuildContext context) {
    TextStyle textStyle = TextStyle(fontSize: 20);

    return Container(
      padding: const EdgeInsets.all(32),
      child: Row(
        children: <Widget>[
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  padding: const EdgeInsets.only(bottom: 8.0),
                  child: Text(
                    'Oeschine Lake Campground',
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                  ),
                ),
                Text('Kandersted,Switzeland', style: textStyle)
              ],
            ),
          ),
          IconButton(
            icon: _isFavorite
                ? Icon(Icons.star, color: Colors.red)
                : Icon(Icons.star_border, color: Colors.red),
            onPressed: () {
              _isFavorite = !_isFavorite;
              if (_isFavorite) {
                _addFavorite();
              } else {
                _removeFavorite();
              }
            },
          ),
          Text('$_favoriteCount')
        ],
      ),
    );
  }
}

class ButtonSection extends StatelessWidget {
  Widget buildButtonColumn({IconData icon, String title}) {
    return Column(
      children: <Widget>[Icon(icon), Text(title)],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          buildButtonColumn(icon: Icons.phone, title: 'Call'),
          buildButtonColumn(icon: Icons.message, title: 'Send'),
          buildButtonColumn(icon: Icons.share, title: 'Share')
        ],
      ),
    );
  }
}
